<template>
    <view :class="[JkClass, 'jk-col', getSpan, getOffset]">
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: 'Col',
        props: {
            span: {
                type: [Number, String],
                value: 0
            },
            offset: {
                type: [Number, String],
                value: 0
            },
            JkClass: {
                type: String,
                default: ''
            }
        },
        computed: {
            getSpan(){
                return this.span ? `jk-col-span-${this.span}` : '';
            },
            getOffset(){
                return this.offset ? `jk-col-offset-${this.offset}` : '';
            }
        }
    }
</script>

<style lang="scss">
    [class*="jk-col-"] {
        float: left;
        box-sizing: border-box;
        width: 0;
    }
    .jk-col-0 {
        display: none;
    }

    @for $i from 0 through 24 {
        .jk-col-span-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }

        .jk-col-offset-#{$i} {
            margin-left: (1 / 24 * $i * 100) * 1%;
        }
    }
    
</style>
